<template>
  <div class="hot-course">
    <div class="hot-course-title">讲师热门课程</div>
    <div class="scrollbar">
      <el-scrollbar>
        <div class="hot-course-list" v-if="datas.length > 0">
          <el-row type="flex" class="item" v-for="(item, index) in datas" :key="index">
            <div class="picture" @click="handleNext(item)">
              <edu-image :src="item.cover_url" fit="cover"></edu-image>
            </div>
            <el-row type="flex" justify="space-between" class="basic">
              <div class="title" @click="handleNext(item)">{{ item.title }}</div>
              <el-row type="flex" class="desc" align="middle" justify="space-between">
                <span class="num">{{ item.sale_count }}人在学</span>
                <span class="price" v-if="item.price > 0">{{ item.price | formatMoney }}</span>
                <span class="free" v-else>免费</span>
              </el-row>
            </el-row>
          </el-row>
        </div>
        <edu-no-data :image="false" text="没有热门课程~" v-else></edu-no-data>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    EduNoData
  },
  props: {
    datas: {
      type: Array
    }
  },
  methods: {
    // 课程跳转
    handleNext(item) {
      this.$router.push({ path: '/course/' + item.id })
    }
  }
}
</script>

<style lang="scss" scoped>
.hot-course {
  background-color: #fff;
  margin-bottom: 14px;
  .hot-course-title {
    color: $text-color-secondary;
    font-size: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid $border-color-divider;
  }
  .scrollbar {
    padding: 20px 0 25px;
  }
  .hot-course-list {
    padding: 0 20px;
    max-height: 364px;
    .item {
      & + .item {
        margin-top: 20px;
      }
      .picture {
        height: 0;
        width: 138px;
        position: relative;
        padding-top: 76px;
        cursor: pointer;
        .el-image {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
      .basic {
        flex: 1;
        flex-direction: column;
        margin-left: 14px;
        padding: 5px 0;
        .title {
          font-size: 14px;
          color: $text-color-import;
          cursor: pointer;
          @include ellipsisLine(2);
          &:hover {
            @include edu-color-auxiliary;
          }
        }
        .num {
          color: $text-color-auxiliary;
          font-size: 13px;
        }
        .price {
          color: $text-color-price;
          font-size: 16px;
        }
        .free {
          color: $text-color-free;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
